<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
			var maskCallback = function mCallBack() {
				alert("。");
			}
			var mask = mui.createMask(maskCallback); //callback为用户点击蒙版时自动执行的回调；
			function f1() {
				mask.show(); //显示遮罩
			}
		</script>
		<!--
        	作者：460575807@qq.com
        	时间：2017-07-10
        	描述：mui默认的蒙版遮罩使用.mui-backdrop类定义（如下代码），若需自定义遮罩效果，只需覆盖定义.mui-backdrop即可
        -->
		<style>
			.mui-backdrop {
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 998;
				background-color: rgba(0, 0, 0, .3);
			}
		</style>
	</head>

	<body>

		<div class="mui-content" style="padding: 80px;" align="center">
			<button type="button" class="mui-btn-grey" style="padding-left: 40px;padding-right: 40px;" onclick="f1()">遮罩</button>
		</div>

	</body>

</html>